<template>
	<view class="container">
		<up-line-progress activeColor="#282828" :percentage="60" height="4" :showText="false"></up-line-progress>
		<view class="title">
			验证码已发送至手机 <br />
			+{{phonenum}}
		</view>
		<view>
			<view class="input-wrap" style="font-size: 42rpx;">
				<!-- 页面显示  如果想要加密形式 给此input加上 password="true" 属性-->
				<input class="input1" type="number" v-for="(item, index) in input_len" @tap="onInput" :key="index"
					disabled :value="input_val.length >= index + 1 ? input_val[index] : ''" />
			</view>
			<!-- 实际监听 -->
			<input class="input2" v-if="isFocus" @blur="blurInput" @input="setInput" v-model="input_val"
				:maxlength="input_len" :focus="true" />
		</view>
		<view style="color: #33A8FF;font-size: 28rpx;margin-top: 20rpx;text-align: center;" @click="getCode">
			{{codeTxt}}
		</view>
		<view class="btn" @click="next">
			下一步
		</view>
	</view>
</template>


<script>
	import { http } from 'uview-plus'
	export default {

		data() {
			return {
				phonenum: '',
				input_len: 6, // 验证码长度
				input_val: '', // 验证码的值
				isFocus: false,
				codeTxt: '发送验证码'
			}
		},
		onLoad(options) {
			console.log(options)
			this.phonenum = options.phone
		},
		methods: {
			achange(value) {
				console.log(value)
				this.phonenum = value
			},
			next() {
				if(this.input_val==''){
					uni.showToast({
						title:'请填写验证码',
						icon:'none'
					})
					return
				}
				uni.navigateTo({
					url: '/pages/forgetPwd/forgetPwd3?phone='+this.phonenum+'&code='+this.input_val
				})
			},
			onInput() {
				this.isFocus = true;
			},
			setInput(e) {
				this.input_val = e.detail.value;
			},
			blurInput() {
				this.isFocus = false;
			},
			//获取验证码
			async getCode() {
				if (this.codeFlag == false) {
					return
				}
				await http.post('/api/sms',{phone:this.phonenum}).then(res=>{
					this.codeFlag = false;
					var time = 60
					this.codeTxt = time + 'S' + '重新获取'
					var timer = setInterval(() => {
						this.codeTxt = '获取验证码'
						if (time == 1) {
							this.codeFlag = true;
							clearInterval(timer)
						} else {
							time--
							this.codeTxt = time + 'S' + '重新获取'
						}
					
					}, 1000)
				})
				
			}

		}
	}
</script>

<style lang="scss">
	.container {
		width: 654rpx;
		margin: 60rpx auto;

		.title {
			font-size: 30rpx;
			font-weight: 350;
			text-align: center;
			color: #282828;
			margin-top: 56rpx;
			margin-bottom: 100rpx;
		}

		.btn {
			width: 654rpx;
			height: 90rpx;
			border-radius: 16rpx;
			opacity: 1;
			color: #fff;
			font-size: 36rpx;
			line-height: 90rpx;
			text-align: center;
			background: #0B9EE2;
			margin-top: 200rpx;
		}

		.wrap {
			padding: 0 30rpx;
		}

		.wrap-header {
			padding: 90rpx 0;

			.wrap-header-item {
				font-size: 42rpx;
				margin-bottom: 17rpx;
			}
		}

		.input-wrap {
			display: flex;
			justify-content: space-between;
			align-items: center;

			.input1 {
				width: 80rpx;
				height: 80rpx;
				border-bottom: 1px solid #9b9ba5;
				justify-content: center;
				text-align: center;
			}
		}

		.input2 {
			height: 0;
			width: 0;
		}
	}
</style>